import React from "react";
import {Icon} from "antd";
import './sass/Location.scss';
import {setItem, getItem} from "../../utils";


export default class Location extends React.Component {
    static propTypes = {
        city: React.PropTypes.array.isRequired
    };

    constructor(props) {
        super(props);
        this.handleChangeLocation = this.handleChangeLocation.bind(this);
        this.handleVisible= this.handleVisible.bind(this);
        this.state = {
            visible: false,
            checked: getItem('CUR_CITY') || ''
        }
    }

    handleChangeLocation(e) {
        e.nativeEvent.stopImmediatePropagation()
        const {onChange} = this.props;

        this.setState({
            checked: e.target.value,
            visible: !this.state.visible
        });
        setItem('CUR_CITY',e.target.value);
        onChange(e.target.value);
    }
    handleVisible(e){
        this.setState({
            visible: !this.state.visible
        })
    }

    render() {
        const {city, checked} = this.props;
        return (
            <div className="location">
                <div className="location-btn" onClick={this.handleVisible}>
                    {this.state.checked || '全部'}
                    {
                        this.state.visible ? <Icon type="up"/> : <Icon type="down"/>
                    }
                </div>
                <ul className="city-list" style={{'display': this.state.visible ? 'block' : 'none'}}  >
                    <li key={0}>
                        <label>
                            全部
                            <input name="city" type="radio"
                                   value=""
                                   checked={this.state.checked === '' ? 'checked' : ''}
                                   onChange={this.handleChangeLocation}/>
                        </label>
                    </li>
                    {
                        city.map((item, index) => {
                            return (
                                <li key={index + 1}>
                                    <label>
                                        {item}
                                        <input name="city" type="radio"
                                               value={item}
                                               checked={this.state.checked === item ? 'checked' : ''}
                                               onChange={this.handleChangeLocation}/>
                                    </label>
                                </li>
                            )

                        })
                    }
                </ul>
            </div>
        )
    }
}